<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    {% load static %}
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet">

    <style>
        .input-box {
            width: 60%;
            height: 35px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            font-size: 14px;

        }

        hr {
            width: 80%;
            opacity: 0.3;
        }

        .login-box {
            width: 400px;
            height: 400px;
            border-radius: 10px;
            background-color: aliceblue;
            left: 50%;
            position: absolute;
            transform: translateX(-50%);

        }

        .box-title {
            text-align: center;
        }

        .box-content {
            text-align: center;
        }

        .btn {
            background-color: dodgerblue;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            height: 40px;
            border: none;
        }

        .btn:hover {
            opacity: 0.7;
        }

        .btn-reg {
            background-color: coral;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            height: 40px;
            border: none;
            opacity: 0.8;
        }

        .btn-reg:hover {
            opacity: 0.5;
        }

        .btn-box input {
            float: start;
        }

        .checkbox-item {
            float: start;
        }
    </style>
</head>
<body>
<div class="login-box">
    <div class="box-title">
        <h2>登录</h2>
    </div>
    <hr/>
    <div class="box-content">
        <p>
            <input type="text" value="" placeholder="请输入用户名" id="username" class="input-box">
        </p>
        <p>
            <input type="password" value="" placeholder="请输入密码" id="password" class="input-box">
        </p>
        <p class="checkbox-item">
            <input type="checkbox" id="remember">
            <span>记住我</span>
        </p>

        <div class="btn-box">
            <input type="button" value="登录" class="btn input-box" id="btn-login"/>
            <input type="button" value="注册" class="btn-reg input-box" id="btn-reg"/>
        </div>

    </div>

</div>
<script>
    $(document).ready(function () {

        layui.use('layer')
        var layer = layui.layer;
        const toRegister = () => {
            window.location.href = '/user/reg'
        }
        const login = async () => {
            var username = $('#username').val();
            var password = $('#password').val();
            var remember = $('#remember').is(':checked');
            console.log(remember)

            if (username && password) {
                var data = new FormData();
                data.append('username', username);
                data.append('password', password);
                data.append('remember', remember);
                let res = await axios.post('/user/login/', data)
                if (res.data.code === 200) {
                    layer.msg(res.data.msg);
                    setTimeout(function () {
                        window.location.href = '/index'
                    }, 1000)

                } else {
                    layer.msg(res.data.msg);
                }
            } else {
                layer.msg("请确认填写用户名和密码")
            }
        }

        $('#btn-login').on('click', login);
        $('#btn-reg').on('click', toRegister);
    })

</script>

</body>
</html>